import React, { Component } from "react"; // 在组件头部引用
import imgUrl from "../../assets/aver.jpg";
import "./Header.css";

import { withRouter } from "react-router-dom";

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: "",
      msg: "",
      options: [
        {
          value: "1",
          label: "退出登录",
        },
      ],
      value: "",
    };
  }
  componentWillMount() {
    let user = JSON.parse(localStorage.getItem("user")) || null;
    if (!user) {
      this.setState({
        msg: "SonghanUI",
      });
      this.logout();
      return;
    } else {
      if (user[0].role == "平民") {
        this.setState({
          msg: "SonghanUI",
        });
      } else {
        this.setState({
          msg: "SonghanUI后台",
        });
      }
    }
    this.setState({
      user: user[0],
    });
  }
  //   退出登录
  async logout() {
    localStorage.clear();
    this.props.history.push("/login");
  }
  render() {
    return (
      <div className="header">
        <div className="header_inner">
          <div className="fl">
            <h2 className="title">{this.state.msg}</h2>
          </div>
          <div className="fr flex">
            <div className="role ml-10">等级:{this.state.user.role}</div>
            <div className="aver ml-10">
              <img src={imgUrl} />
            </div>
            <div className="username ml-10">
              {this.state.user.username || ""}
            </div>
            <div onClick={this.logout.bind(this)} className="select ml-10">
              退出登录
            </div>
          </div>
        </div>
      </div>
    );
  }
}

//暴露的时候  Aggrid是自己的组件
export default withRouter(Header);
